<template>
  <a-drawer
    :visible="visible"
    :title="titleTxt"
    width="800"
   
    :footer-style="{ textAlign: 'right' }"
    :bodyStyle="{
      background: '#f9fafb',
    }"
    @close="onClose"
  >
      <a-form  layout="horizontal" >
            <a-form-item label="脚本名称" >
                <a-input
                    placeholder="请输入脚本名称"
                    
                    :maxlength="12"
                />
            </a-form-item>
            <a-form-item label="脚本时长">
                0s
            </a-form-item>
            <a-form-item label="音频配置">
              青年男声（默认）
              <a-button type="link">编辑</a-button>
            </a-form-item>
            <a-form-item label="场景音频字幕">
              <a-radio-group v-model:value="radioValue">
                        <a-radio :value="1"> 开启 </a-radio>
                        <a-radio :value="2"> 关闭 </a-radio>
                        <a-button type="link">字体效果</a-button>
                </a-radio-group>
            </a-form-item>
            <div class="script-content">
              <div class="content-title">
                <span style="font-weight: 600;margin-right: 20px;">脚本内容</span>
                <span class="text-gray-5">脚本一般由多个场景组成，场景内可添加台词（及生成的音频）和视频等内容</span>
              </div>
            </div>
        </a-form>
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, toRefs, computed } from "vue";
import {} from "@ant-design/icons-vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;

export default defineComponent({
  name: "AddGrouping",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    recordId: {
      type: [Number, String],
      default: '',
    },
  },
  components: {},
  setup(props, { emit }) {
    const state = reactive({
      radioValue:1,
      count: 0,
      dataSource: [],
      columns: [
        {
          title: "视频",
          dataIndex: "group",
          key: "group",
        },
        {
          title: "标题",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "发布动态",
          dataIndex: "avatar",
          key: "avatar",
        },
        {
          title: "播放量",
          dataIndex: "account",
          key: "account",
        },
        {
          title: "评论数",
          dataIndex: "fansNum",
          key: "fansNum",
          sort: true,
        },
        {
          title: "获赞数",
          dataIndex: "shareNum",
          key: "shareNum",
          sort: true,
        },
        {
          title: "发布时间",
          dataIndex: "likeCount",
          key: "likeCount",
          sort: true,
        },
      ],

      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      activeKey: 1,
      tabsList: [
        {
          title: "全部",
          key: 1,
        },
        {
          title: "待发布",
          key: 2,
        },
        {
          title: "发布中",
          key: 3,
        },
        {
          title: "发布成功",
          key: 4,
        },
        {
          title: "发布失败",
          key: 5,
        },
        {
          title: "已删除",
          key: 6,
        },
      ],
    });

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
    }));
    const titleTxt = computed(()=>{
      return props.recordId?'编辑脚本':'创建脚本'
    })
    console.log(titleTxt.value,'titleTxttitleTxt');
    const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
    };

    const onClose = () => {
      emit("onCancel");
    };

    const onConfirm = () => {
      emit("onConfirm");
    };

    return {
      ...toRefs(state),
      onConfirm,
      onClose,
      pagination,
      handleTableChange,
      titleTxt,
    };
  },
});
</script>

<style lang="less" scoped>
.card {
  width: 100%;
  padding: 20px 24px;
  background: #fff;
  margin-bottom: 20px;
  .text-bold {
    font-weight: 700;
  }
}
:deep(.ss-tabs-top > .ss-tabs-nav) {
  margin: 0;
}
:deep(.ss-table-title) {
  padding-bottom: 0;
}
</style>
